<template>
  <div>
    <p class="font-bold">第 {{ count }} 步：点击下载模版</p>
    <a
      @click.native="handleDownLoadTemplate"
      class="bg-[var(--base-small-bg-color)] flex items-center justify-center rounded-md p-3 mt-2 cursor-pointer"
    >
      <div class="text-[var(--main-color)] flex items-center gap-1">
        <i class="iconfont icon-download1"></i>下载模板
      </div>
    </a>
    <p class="my-4 font-bold">第 {{ count + 1 }} 步：按照模版要求填写</p>
    <p class="font-bold mb-2">第 {{ count + 2 }} 步：上传填写完成的文件</p>
    <Upload v-model="fileList" :accept="accept" :isTip="false" :limit="limit">
      <template #content>
        <div
          class="w-[100%] flex items-center justify-center rounded-md p-3 mt-2 cursor-pointer border border-dashed border-[var(--main-color)]"
        >
          <div class="text-[var(--main-color)] flex items-center gap-1">
            <i class="iconfont icon-add"></i>上传文件
          </div>
        </div>
      </template>
    </Upload>
  </div>
</template>
<script setup>
import { getImportUrl } from "@/api/public.js";
import Upload from "@/components/Upload/index.vue";
const props = defineProps({
  count: { type: Number, default: 1 }, //步骤
  type: { type: String, default: "" }, //下载模板type
  urlType: { type: String, default: "" }, //上传文件type
  accept: { type: String, default: "" }, //上传文件类型
  limit: { type: [String, Number], default: 1 }, //上传限制
});
const { type } = toRefs(props);
const fileList = ref([]);
const handleDownLoadTemplate = async () => {
  const { data } = (await getImportUrl({ type: type.value })) || {};
  const _url = data?.uri;
  if (_url) window.open(_url, "noopener", "noreferrer");
};
const getFileList = () => {
  return fileList.value || [];
};
const clearFiles = () => {
  fileList.value = [];
};
defineExpose({ getFileList, clearFiles });
</script>
